<template>
  <div>
    <div class="productdetails">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#8b0000">
        <van-swipe-item v-for="item in data.gallery" :key="item.id">
          <img :src="item.img_url" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>

      <!-- 无忧服务 -->
      <van-row>
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          30天无忧退货
        </van-col>
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          48小时快速退费
        </van-col>
        <van-col span="8">
          <van-icon name="checked" color="#8b0000" />
          满88享包邮
        </van-col>
      </van-row>

      <!-- info -->
      <div class="info">
        <h2>{{ info.name }}</h2>
        <section>{{ info.goods_brief }}</section>
        <div>{{ info.retail_price | RMBFormat }}</div>
      </div>

      <!-- 弹出层按钮 -->
      <van-row class="tanchu" @click="ShowSku">
        <van-col span="22">
          <div>展示弹出层</div>
        </van-col>
        <van-col span="2">
          <van-icon name="arrow" color="#666" />
        </van-col>
      </van-row>

      <!-- 参数 -->
      <div class="canshu">
        <h2>商品参数</h2>
        <ul>
          <li v-for="(item, index) in attribute" :key="index">
            <span>{{ item.name }}</span>
            <big>{{ item.value }}</big>
          </li>
        </ul>
      </div>

      <!-- 商品信息 p标签 -->
      <div class="tupian" v-html="goods_desc"></div>

      <!-- 常见问题 -->
      <div class="question">
        <div class="line_title">
          <span></span>
          <h3>常见问题</h3>
        </div>
        <ul>
          <li v-for="(item, index) in issue" :key="index">
            <h3>{{ item.question }}</h3>
            <p>{{ item.answer }}</p>
          </li>
        </ul>
        <!-- 相关产品 -->
        <div class="relevant">
          <div class="line_title">
            <span></span>
            <h3>相关产品</h3>
          </div>
        </div>
      </div>

      <!-- 相关产品 -->
      <Products :searchTipsProductList="goodsList" />

      <!-- Sku -->
      <van-sku
        v-model="isShowSku"
        ref="sku"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
      />
    </div>
    <!-- 底部 商品导航 -->
    <div class="action">
      <van-goods-action>
        <van-goods-action-icon
          :icon="isCollected ? 'star' : 'star-o'"
          :text="isCollected ? '已收藏' : '未收藏'"
          :color="isCollected ? '#ff5000' : '#666'"
        />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="isLogin ? goodsCount : 0"
          @click="cartClick"
        />
        <van-goods-action-button type="danger" text="立即购买" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="ShowSku"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Products from "@/components/Products";
import { Toast } from "vant";
import {
  GetProductdetailsData,
  GetRelatedProductsData,
  GetCartNum,
  AddToCart,
} from "@/request/api";
export default {
  components: {
    Products,
  },
  computed: {},
  data() {
    return {
      //sku展示数据
      isShowSku: false, //是否展示sku
      sku: {
        tree: [],
        price: "1000", //默认价格
        stock_num: 200, //商品总库存
        hide_stock: false, //是否显示库存 true是不显示哦，false才显示
      },
      goods: {
        // 默认商品缩略图
        picture: "",
      },

      // 以下为详情页展示数据--------------
      // 是否收藏
      isCollected: false,

      data: [],
      // 商品描述
      info: [],
      // 参数
      attribute: [],
      // 商品信息,返回html标签
      goods_desc: [],

      // 常见问题
      issue: [],

      // 相关产品
      goodsList: [],

      // 购物车数量 角标
      goodsCount: 5, //默认值

      // 仅仅用来拿数据的  ----> productId
      productList: [],

      isLogin: false,
    };
  },
  methods: {
    // 点击是否展示sku
    ShowSku() {
      // let token = localStorage.getItem("token");
      // if (!token) {
      //   this.$toast("请先登录!");
      //   setTimeout(() => {
      //     this.$router.push("/user");
      //   }, 500);
      //   return;
      // }

      // 判断有没有登录
      let ret = this.utils.mustBeLogin();
      if (!ret) return;

      if (this.isShowSku) {
        // 当sku显示的时候,那么就执行真正的添加到购物车的操作
        // 真正添加到购物车的操作
        // console.log("拿到这个num的数量：",this.$refs.sku.getSkuData().selectedNum);
        // 通过 ref 可以获取到 Sku 实例并调用实例方法
        let step = this.$refs.sku.getSkuData().selectedNum; //即步进器的num数量
        AddToCart({
          goodsId: this.$route.query.id, //商品id,地址栏id
          productId: this.productList[0].id, // 产品id，来自productList的第一个数组项中的id
          number: step,
        }).then((res) => {
          console.log(res);
          // 更新购物车数量
          this.goodsCount = res.data.cartTotal.goodsCount;
          // 提示成功添加到购物车
          this.$toast.success("添加成功!");
        });
      }
      this.isShowSku = !this.isShowSku;
    },
    // 点击收藏/未收藏
    isCollectedbtn() {
      this.isCollected = !this.isCollected;
    },
    // 点击购物车
    cartClick(){
      // 判断有没有登录
      let ret = this.utils.mustBeLogin();
      if (!ret) return;
      this.$router.push("/cart")
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      this.isLogin = true;
    }
    
    // 拿到当前路由的 id值
    // $route.query  ---->  查询字符串参数
    console.log(this.$route.query.id);

    // 请求商品详情数据
    GetProductdetailsData({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      // 商品详情的数据
      let { data } = res;
      this.data = data;
      this.info = data.info;
      this.attribute = data.attribute;
      this.goods_desc = data.info.goods_desc;
      this.issue = data.issue;
      this.productList = data.productList;

      // sku中的商品数据
      this.goods.picture = data.info.list_pic_url;
      this.sku.price = data.info.retail_price;
      this.sku.stock_num = data.info.goods_number;
    });

    // 请求 相关产品 数据
    GetRelatedProductsData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      this.goodsList = res.data.goodsList;
    });

    // 获取购物车数量的请求
    GetCartNum().then((res) => {
      console.log("购物车的数量请求", res);
      this.goodsCount = res.data.cartTotal.goodsCount;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.productdetails {
  padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.van-row {
  text-align: center;
  /* border: 1px solid red; */
  line-height: 0.1rem;
  justify-content: center;
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-icon {
  /* line-height: .8rem; */
}
.info {
  background: #fff;
  text-align: center;
  line-height: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  h2 {
    font-size: 0.2rem;
  }
  section {
    font-size: 0.14rem;
  }
  div {
    font-size: 0.14rem;
    color: #8b0000;
  }
}
.van-goods-action {
  z-index: 9999;
}
.tanchu {
  margin-bottom: 20px;
  background-color: #fff;
  height: 44px;
  div {
    text-align: left;
  }
  padding-left: 0.2rem;
  font-size: 0.14rem;
}
.canshu {
  padding: 10px;
  background-color: #fff;
  h2 {
    font-size: 20px;
    line-height: 40px;
  }
  ul {
    li {
      background: #efefef;
      border-radius: 6px;
      height: 30px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      span {
        color: #999;
        width: 20%;
        margin-right: 5px;
        text-align: right;
      }
      big {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.tupian {
  display: block;
}
.question {
  margin-top: 10px;
  background: #fff;
  .line_title {
    width: 100%;
    height: 40px;
    position: relative;
    font-size: 18px;
    background: #fff;
    span {
      width: 50%;
      height: 2px;
      background: #ccc;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    h3 {
      width: 30%;
      height: 40px;
      background: #fff;
      position: absolute;
      text-align: center;
      line-height: 40px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }

  ul li h3::before {
    content: "";
    width: 4px;
    height: 4px;
    background: darkred;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -2px;
  }
  ul {
    li {
      h3 {
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: relative;
        padding-right: 10px;
      }
      p {
        padding-left: 20px;
        padding-right: 10px;
        color: #666;
      }
    }
  }
}
.relevant {
  margin-top: 20px;
}
.van-sku-container {
  min-height: auto;
}
/deep/.van-sku-messages {
  padding: 0;
}
/deep/.van-sku__stepper-title,
/deep/.van-sku__stepper {
  float: none;
}
</style>